<template>
	<!-- 为你推荐 -->
	<view class="hot-goods u-m-b-10 u-p-x-16">

		 
		<view class="u-waterfall">
			<view id="u-left-column" class="u-column">
				<view class="goods-item u-m-b-16 u-flex u-row-center u-col-center" v-for="(leftGoods,index) in leftList"
					:key="index">
					<view v-if="index!=randomIndex">
						<ljshop-goods-card 
						:detail="leftGoods" 
						:type="leftGoods.activity_type"
						:image="leftGoods.large"
						:title="leftGoods.name"
						:subtitle="leftGoods.caption?leftGoods.caption:''"
						:price="leftGoods.price.toFixed(2)"
						:originPrice="((leftGoods.price-leftGoods.cost)*rebate/100).toFixed(2)"
						:sales="leftGoods.sales"
					 
						@click="$Router.push({ path: '/pages/goods/detail', query: { id: leftGoods.id } })"
						v-if="leftGoods.type!='EXCHANGE'">
						</ljshop-goods-card>
					</view>
					<view v-else
						style="width: 345rpx;background: #feedd1;border-radius: 20rpx;overflow: hidden;padding-bottom: 20rpx;">
						<view style="padding-left: 20rpx;padding-top: 10rpx;">
							<!-- 	<view style="display: flex;direction: row;">
								<view>
									<image style="width: 60rpx;height: 60rpx;border-radius: 50%;" src="https://image.hzwltb69.com/app/images/logo.png"></image>
								</view>
								<view style="height: 60rpx;line-height: 60rpx;text-align: center;font-size: 28rpx;font-weight: 600;padding-left: 10rpx;">
								
								</view>
							</view> -->
							<view
								style="height:30rpx;line-height: 30rpx;;font-size: 24rpx;color: #888;margin-top: 10rpx;">
								选一下获取更多内容
							</view>
						</view>
						<view
							style="display: flex;direction: row;background: #fff;height: 80rpx;width: 330rpx;border-radius: 20rpx;margin-left: 8rpx;margin-top: 26rpx;"
							v-for="(item,index2) in leftGoods">
							<view @click="todetail(index2)"
								style="height: 80rpx;line-height: 80rpx;text-align: center;font-size:34rpx;font-weight: 600;padding-left:20rpx;">
								{{item.name}}
							</view>
							<view class="">
								<image @click="todetail(index2)"
									style="width: 70rpx;height: 70rpx;margin-left: 60rpx;margin-top: 5rpx;"
									:src="item.icon"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view id="u-right-column" class="u-column">
				<view class="goods-item  u-m-b-16 u-flex u-row-center u-col-center"
					v-for="(rightGoods,index) in rightList" :key="index">
					<ljshop-goods-card :detail="rightGoods" :type="rightGoods.activity_type" :image="rightGoods.large"
						:title="rightGoods.name" :subtitle="rightGoods.caption?rightGoods.caption:''" :price="rightGoods.price.toFixed(2)"
						:originPrice="((rightGoods.price-rightGoods.cost)*rebate/100).toFixed(2)"
						:sales="rightGoods.sales"  
						@click="$Router.push({ path: '/pages/goods/detail', query: { id: rightGoods.id } })"
						v-if="rightGoods.type!='EXCHANGE' ">
					</ljshop-goods-card>
				</view>
			</view>

		</view>
		<!-- 
		<button v-show="hasmore" class="u-reset-button refresh-btn u-m-y-20 u-flex u-col-center u-row-center"
			@tap.stop="loadMore">
			<text class="u-m-r-6 u-iconfont uicon-reload" style="font-size: 28rpx;color: #999"
				:class="{ 'refresh-active': isRefresh }"></text>
			{{ hasmore ? '收起' : '加载更多' }}
		</button> -->
		<view class="x-c" style="width: 100%;">
			<u-loadmore v-show="hasmore" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
		</view>
	</view>
</template>

<script>
	/**
	 * 自定义之为你推荐
	 * @property {Object} detail - 推荐商品信息
	 */

	export default {
		components: {

		},
		data() {
			return {
				page: 0,
				total: 0, //总商品数
				perPage: 0, //单页商品数
				goodsList: [],
				isRefresh: false,
				// 瀑布流 350-330
				addTime: 0, //排序间隙时间
				leftHeight: 0,
				rightHeight: 0,
				leftList: [],
				rightList: [],
				rebate: 40,
				hasmore: true,
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				randomIndex: 0,
				curindex: 0,
				ishastuijian: false,
				tuijianlist: [],
				hasadd: false
			};
		},

		props: {
			detail: {
				type: Object,
				default: () => {}
			}
		},
		created() {
			this.randomIndex = this.getrandom(0, 6);

			this.getGoodsList()
			// 触底监听
			uni.$on('uOnReachBottom', data => {
				if (this.hasmore) {
					this.page += 1;
					this.getGoodsList();
				}
			});
		},
		onPullDownRefresh() {
			//	this.getGoodsList()
		},
		methods: {
			getrandom(max, min) {
				return Math.floor(Math.random() * (max - min)) + min;
			},
			todetail(index) {
				let item = this.tuijianlist[index]
				if (item.type == "REGULAR") {
					 
					if (uni.getStorageSync("UId") > 0) {
						let that = this;
						that.loadStatus = 'loadmore';
						that.$http('user.apiinfo', {
							UId: uni.getStorageSync("UId"),
						}).then(res => {
							if (res.code == 1) {
								if (res.data.showcc == 1 && !this.addjingping) {
									this.$Router.push({
										path: '/pages/tuandui/list',
									})
								} else {
									this.$Router.push({
										path: '/pages/public/webview',
										query: {
											webviewPath: "https://www.hzwltb69.com/article/detail/152"
										}
									})
								}
							}
						});
					} else {
						 // let url = "https://www.hzwltb69.com/article/detail/152"
						 // uni.navigateTo({
						 // 	url: '/subunimodules/uni-id-pages/pages/common/webview/webview?url=' + url + '&title=开通说明',
						 // 	success: res => {},
						 // 	fail: () => {},
						 // 	complete: () => {}
						 // });
						 this.$Router.push({
						 	path: '/pages/public/webview',
						 	query: {
						 		webviewPath: "https://www.hzwltb69.com/article/detail/152"
						 	}
						 })
					}
 

				}
				if (item.type == "THEME") {
					this.$Router.push({
						path:item.path ,
						query: {
							id: item.bind
						}
					})
				}
				if (item.type == "PRODUCT") {
					this.$Router.push({
						path: '/pages/goods/detail',
						query: {
							id: item.bind
						}
					})
				}
				if (item.type == "STORE") {

					uni.setStorageSync("detailStoreId", item.bind)
					this.$Router.push({
						path: '/pages/store/index',
						query: {
							id: item.bind
						}
					})
				}

				if (item.type == "APPLICATION") {
					uni.navigateTo({
						url: "/pages//index/user"
					})

				}

			},
			async splitData() {

				if (this.randomIndex == this.curindex && this.ishastuijian && !this.hasadd) {
					this.curindex++;
					this.leftHeight += 330;
					this.leftList.push(this.tuijianlist);
					this.hasadd = true

					if (this.tempList.length) {
						setTimeout(() => {
							this.splitData();
						}, this.addTime);
					}

				} else {
					if (!this.tempList.length){
						this.isRefresh=false
						return
					}
					if(this.tempList.length==1){
						this.isAdding = false
					}
						
					let item = this.tempList[0];
					if (!item) return;
					// 分左右
					if (this.leftHeight < this.rightHeight) {
						this.leftHeight += 330;
						item.subsidy = ((item.price - item.cost) * this.rebate / 100).toFixed(2);
						this.curindex++;
						this.leftList.push(item);
					} else if (this.leftHeight > this.rightHeight) {
						this.rightHeight += 330;
						item.subsidy = ((item.price - item.cost) * this.rebate / 100).toFixed(2);
						this.rightList.push(item);
					} else {
						this.curindex++;
						this.leftHeight += 330;
						this.leftList.push(item);
					}
					this.tempList.splice(0, 1);
					if (this.tempList.length) {
						setTimeout(() => {
							this.splitData();
						}, this.addTime);
					}
				}

				// 移除临时列表的第一项，如果临时数组还有数据，继续循环
			},
			clear() {
				this.leftList = [];
				this.rightList = [];
				this.leftHeight = 0;
				this.rightHeight = 0;

			},

			getGoodsList() {
				if (uni.getStorageSync("UId") > 0) {

					this.hasUserGet()
				} else {

					this.noUserGet()
				}
			},
			hasUserGet() {
				 console.info( uni.getStorageSync("opents") == 1 ? 1 : 0)
				let that = this;
				that.$http('goods.oldRecomlist', {
					page: that.page,
					UId: uni.getStorageSync('UId'),
					time: Date.now(),
					opents: uni.getStorageSync("opents") == 1 ? 1 : 0
				}).then(res => {
					if (res) {
						if (res.shortcuts.length > 0) {
							this.ishastuijian = true;
							this.tuijianlist = res.shortcuts
							//console.info(JSON.stringify(res.shortcuts))
						}
						if (res.product.length > 0) {

							if (that.page == 0) {

								that.goodsList = res.product;
								that.tempList = res.product;
								that.rebate = res.rebate;
								that.goodsList.length && that.splitData();
							} else {

								that.goodsList = res.product;
								that.tempList = res.product;
								that.goodsList.concat(res.product)
								that.tempList.concat(res.product)
								that.goodsList.length && that.splitData();
							}
						} else {
							that.hasmore = false
						}

					}
				});
			},
			noUserGet() {
				let that = this;
				that.$http('goods.hotlists', {
					page: that.page,
				}).then(res => {

					if (res) {
						if (res.shortcuts.length > 0) {
							this.ishastuijian = true;
							this.tuijianlist = res.shortcuts
							//console.info(JSON.stringify(res.shortcuts))
						}
						if (res.product.length > 0) {

							if (that.page == 0) {

								that.goodsList = res.product;
								that.tempList = res.product;
								that.rebate = res.rebate;
								that.goodsList.length && that.splitData();
							} else {
								that.goodsList = res.product;
								that.tempList = res.product;
								that.goodsList.concat(res.product)
								that.tempList.concat(res.product)
								that.goodsList.length && that.splitData();
							}
						} else {
							that.hasmore = false
						}

					}
				});
			},

			// 加载更多
			loadMore() {
				if (!this.isRefresh) {
					// 加载更多
					if (this.hasmore) {
						this.isRefresh = true;
						this.page += 1;
						this.getGoodsList();
					} else {
						// 重置为1页数据
						this.page = 0;
						this.lastPage = 0;
						this.goodsList = [];
						this.clear();
						this.getGoodsList();
					}
				}
			}
		}
	};
</script>

<style lang="scss">
	@mixin vue-flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: $direction;
		/* #endif */
	}

	.u-waterfall {
		@include vue-flex;
		flex-direction: row;
		align-items: flex-start;
	}

	.u-column {
		@include vue-flex;
		flex: 1;
		flex-direction: column;
		height: auto;
	}

	.u-image {
		width: 100%;
	}

	// 为你推荐
	.hot-goods {
		// background:#ef3d57;

		.refresh-btn {
			margin-left: 50%;
			transform: translateX(-50%);
			width: 156rpx;
			line-height: 50rpx;
			background: #ffffff;
			border-radius: 25rpx;
			font-size: 22rpx;
			font-weight: 500;
			color: #999999;
			white-space: nowrap;
		}

		.refresh-active {
			transform: rotate(360deg);
			transition: all linear 0.5s;
		}
	}
</style>